import { content } from '../../.nuxt/tailwind.config';
<template>
  <div id="service">
    <!--    背景图-->
    <div class="service-bg">
      <img src="http://competition.duoyu021.top/index/servebg.png" alt="背景">
    </div>
    <!--    服务介绍-->
    <div class="introbox">
      <div class="intro">
        <div class="hotstit">
          <div class="tit-eng">SEVICE INTRODUCTION</div>
          <div class="tit-p">服务介绍</div>
        </div>
        <div class="introcent">
          <div class="introitem" v-for="(item,i) in introlist" :key="i">
            <div class="introtit">{{ item.title }}</div>
            <div class="introtext">
              {{ item.content }}
            </div>
            <div class="intronum">￥{{ item.price }}/年起</div>
            <button class="introbut" @click="toask(i)">一键咨询</button>
          </div>
        </div>
        <div class="lookmore" @click="lookmore">
          <img src="http://competition.duoyu021.top/index/mone.png" alt="more">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

const router = useRouter()
useHead({
  title: '服务介绍',
})

// const introlist = ref([
//   {
//     tit: '服务标题',
//     text: '服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容',
//     num: '1000',
//     path: '/404'
//   }, {
//     tit: '服务标题',
//     text: '服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容',
//     num: '1000',
//     path: '/404'
//   }, {
//     tit: '服务标题',
//     text: '服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容',
//     num: '1000',
//     path: '/404'
//   }, {
//     tit: '服务标题',
//     text: '服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容',
//     num: '1000',
//     path: '/404'
//   }, {
//     tit: '服务标题',
//     text: '服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容',
//     num: '1000',
//     path: '/404'
//   }, {
//     tit: '服务标题',
//     text: '服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容服务标题内容',
//     num: '1000',
//     path: '/404'
//   },
// ])
const toask = (i) => {
  router.push(introlist.value[i].path)
}

const lookmore = () => {
  router.push('/404')
}

//获取服务介绍列表
const { data: dataservice } = await useAsyncData(() => {
  return getServiceList({});
}, {
  default: () => ({})
})
// console.log(dataservice.value.data.data);
const introlist = dataservice.value.data.data
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

//背景图
.service-bg {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

//服务介绍
.introbox {
  width: 100%;
}

.intro {
  width: 66%;
  margin: auto;
}

.hotstit {
  display: block;
  position: relative;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}


.tit-eng {
  font-size: 2rem;
  color: #e4e4e4;
  font-weight: bold;
  transition: text-shadow 0.3s ease-in-out;
}

.tit-p {
  color: #0b6cfe;
  font-weight: bold;
  font-size: 2rem;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: text-shadow 0.3s ease-in-out;
}

.tit-eng:hover {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
}

.tit-p:hover {
  text-shadow: 2px 2px 4px rgba(11, 108, 254, 0.5);
}

.introcent {
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.introitem {
  width: 49%;
  background-color: #f8fbfe;
  border-radius: 6px;
  border: solid 2px #f2f7fe;
  box-shadow: 0 0 10px rgba(248, 251, 254, 0.3);
  padding: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 1.5s;
}

.introitem:hover {

  transform: scale(1.05);
}

.introtit {
  font-size: 22px;
}

.introtext {
  margin: 20px 0;
  //强制显示3行
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.intronum {
  font-size: 24px;
  color: #f7ac76;
  margin-top: 40px;
  margin-bottom: 40px;
  transition: transform 0.5s ease-in-out;
}

.introitem:hover .intronum {
  transform: rotate(360deg);
}

.introbut {
  width: 86%;
  margin: auto;
  background-color: #0b6cfe;
  padding: 10px 0;
  box-sizing: border-box;
  color: white;
  border-radius: 8px;
  transition: background-position 0.2s ease-in-out;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #0b6cfe 50%, #f39c12 50%);
}

.introbut:hover {
  background-position: -100% 0;
}

.lookmore img {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 60px;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
}

.lookmore img:hover {
  transform: rotate(360deg);
}


/*
响应1500px
 */
@media screen and (max-width: 1500px) {
  .intro {
    width: 80%;
  }
}

/*
响应1200px
 */
@media screen and (max-width: 1200px) {
  .intro {
    width: 90%;
  }
}

/*
响应768px
 */
@media screen and (max-width: 768px) {
  .service-bg {
  width: 100%;
  height: 200px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
  .tit-eng {
    font-size: 24px;
  }
  .tit-p {
    font-size: 24px;
  }
  .intro {
    width: 96%;
  }
  .introitem {
    padding: 10px 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .introtit {
    font-size: 20px;
  }
  .introtext {
    font-size: 14px;
    margin: 10px 0;
  }
  .intronum {
    font-size: 18px;
    margin: 10px;
  }
  .introbut {
    width: 100%;
    padding: 5px;
  }
  .lookmore img {
    margin-top: 10px;
    margin-bottom: 20px;
  }

}
</style>
